<template>
	<view class="detial_wrap">
		<view class="order_id">
			<view> <text class="label">订单编号: </text> <text class="id"> xxxxx123213xx</text></view>
			<view><text class="label"> 下单时间: </text><text class="id">2024/06/12</text></view>
		</view>
		<view class="total tn-flex tn-flex-row-between tn-flex-col-center">
			<view class="">
				共10件
			</view>
			<view class="">
				总计：¥ 122
			</view>
		</view>
		<tn-read-more ref="readMore" openText="展开(共10件)" closeText="收起(共10件)" :closeBtn="true">
			<Item v-for="(item, index) in list" :key="item" :item="item" />
		</tn-read-more>

	</view>
</template>

<script>
	import Item from './components/item.vue'
	export default {
		components: {
			Item
		},
		data() {
			return {
				list: [{
					img_path: '/static/goods/fruit.jpg',
					name: '土豆',
					price: 1.5,
					unit: '斤',
					number: 2,
					selected: true
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '大白菜',
					price: 2,
					unit: '斤',
					number: 3,
					selected: false
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '土豆',
					price: 1.5,
					unit: '斤',
					number: 2,
					selected: true
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '大白菜',
					price: 2,
					unit: '斤',
					number: 3,
					selected: false
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '土豆',
					price: 1.5,
					unit: '斤',
					number: 2,
					selected: true
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '大白菜',
					price: 2,
					unit: '斤',
					number: 3,
					selected: false
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '土豆',
					price: 1.5,
					unit: '斤',
					number: 2,
					selected: true
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '大白菜',
					price: 2,
					unit: '斤',
					number: 3,
					selected: false
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '土豆',
					price: 1.5,
					unit: '斤',
					number: 2,
					selected: true
				}, {
					img_path: '/static/goods/fruit.jpg',
					name: '大白菜',
					price: 2,
					unit: '斤',
					number: 3,
					selected: false
				}],
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.readMore.init()
			})
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.detial_wrap {
		padding: 20rpx;
		background-color: #eee;
		min-height: 100vh;

		.total {
			padding: 30rpx 20rpx 20rpx;
			margin-bottom: 3px;
			text-align: right;
			background-color: #fff;
			font-size: 32rpx;
			border-radius: 10rpx;
		}

		.order_id {
			padding: 20rpx;
			margin-bottom: 6rpx;
			color: #666;
			font-size: 30rpx;
			line-height: 45rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.label {
				margin-right: 10rpx;
				color: #333;
				font-weight: bolder;

			}

			.id {}
		}
	}

	::v-deep .tn-collapse-item__head__title {
		text-align: center !important;
		flex: none;
	}

	::v-deep .tn-collapse-item__head {
		display: flex;
		justify-content: center !important;
	}
</style>